<!DOCTYPE html>
<html lang="en">
<head>
    <script charset="utf-8"
            src="https://tag.baidu.com/vcard/v.js?siteid=6207135&amp;url=http%3A%2F%2Flocalhost%3A8888%2Ftest.html&amp;source=&amp;rnd=954143891&amp;hm=1"></script>
    <script type="text/javascript" src="http://www.tuniu.com/web-mall/xapi/xlayout/config"></script>
    <meta name="applicable-device" content="pc">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <script src="/js/jquery/jquery.min.js"></script>
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.css">
    <script src="/js/bootstrap/js/bootstrap.js"></script>
    <script src="/js/plugins/My97DatePicker/WdatePicker.js"></script>
    <script src="/js/plugins/My97DatePicker/lang/zh-cn.js"></script>
    <script src="/js/plugins/jquery-validation/jquery.validate.min.js"></script>
    <script src="../js/plugins/jquery-validation/messages/messages_cn.js"></script>
    <script src="/js/common.js"></script>
    <script src="/js/plugins/messager/jquery.bootstrap.min.js"></script>
    <script src="/js/plugins/jquery-form/jquery.form.js"></script>


    <title>我的私人订制</title>

    <script>
        $(function () {
            var user = JSON.parse(sessionStorage.getItem('user'));
            var srcplace;
            var destplace;
            //-----------------------------------回显-------------------------------
            $.get("/customize/get",{userId:user.id},function (data) {
               if(data){
                    $('#foot').toggle()
                   srcplace=data.srcplace.id;
                   destplace=data.destplace.id;
                   // $('#save select[name="srcplace.id"]').val(data.srcplace.id);
                   // $('#save select[name="destplace.id"]').val(data.destplace.id)
                  $('#save input[name="dest"]').val(data.destplace.name)
                   $('#save input[name="start"]').val(data.srcplace.name)
                   $('#save input[name="passengerAdult"]').val(data.passengerAdult)
                   $('#save input[name="passengerChild"]').val(data.passengerChild)
                   $('#save input[name="estimatedcost"]').val(data.estimatedcost)
                   $('#save input[name="tel"]').val(data.tel)
                   $('#save input[name="other"]').val(data.other)
                   $('#save select[name="customType"]').val(data.customType)
                   //时间格式的回显
                   $('#save input[name="begintime"]').val(data.begintime)
                   $('#save input[name="endtime"]').val(data.endtime)
                   $('#save input[name="id"]').val(data.id);

               }

            })


            //点击出发地发送ajax请求获得所在地
            fun = function () {
                srcplace=null;
                $.get("/regions/app/13", function (data) {
                    var html = '<option value="-1">--请选择--</option>';
                    $.each(data, function (index, item) {
                        html += "<option value='" + item.id + "'>" + item.name + "</option>";
                    })

                    //dom原生方法让隐藏的显示出来(jquery怎么做)
                    var traget = document.getElementById("div1");
                    traget.style.display = "inline";
                    $('#start').html(html)

                    //触发二级联动
                    $('.div1').change(function () {
                        var parentId = $(this).val();
                        if (parentId == -1) {
                            $('#start').html("<option value='-1'>--请选择--</option>");
                            return;
                        }
                        //发送ajax获取二级地区
                        var htmlsub = '<option value="-1">--请选择--</option>';
                        $.get("/regions/app/" + parentId, function (subdata) {
                            $.each(subdata, function (index, item) {
                                htmlsub += "<option value='" + item.id + "'>" + item.name + "</option>";
                            })

                            //dom原生方法让隐藏的显示出来(jquery怎么做)
                            $('#start2').html(htmlsub);
                            var subtraget = document.getElementById("div2");
                            subtraget.style.display = "inline";

                            //三级联动
                            $('.div2').change(function () {
                                var parentIds = $(this).val();
                                if (parentIds == -1) {
                                    $('#start2').html("<option value='-1'>--请选择--</option>");
                                    return;
                                }
                                var htmlsub2 = '<option value="-1">--请选择--</option>';
                                $.get("/regions/app/" + parentIds, function (subdatas) {


                                    $.each(subdatas, function (index, item) {
                                        htmlsub2 += "<option value='" + item.id + "'>" + item.name + "</option>";
                                    })

                                    //dom原生方法让隐藏的显示出来(jquery怎么做)
                                    var sub2traget = document.getElementById("div3");
                                    sub2traget.style.display = "inline";
                                    $('#start3').html(htmlsub2);
                                })
                            })


                        })
                    })

                })


            }
            //-------------------------------------------------------------

            funs = function () {
                destplace=null;
                $.get("/regions/app/13", function (data) {
                    var html = '<option value="-1">--请选择--</option>';
                    $.each(data, function (index, item) {
                        html += "<option value='" + item.id + "'>" + item.name + "</option>";
                    })

                    //dom原生方法让隐藏的显示出来(jquery怎么做)
                    var traget = document.getElementById("div4");
                    traget.style.display = "inline";
                    $('#start4').html(html)
                    //触发二级联动
                    $('.div4').change(function () {
                        var parentId = $(this).val();
                        console.log(parentId);
                        if (parentId == -1) {
                            $('#start').html("<option value='-1'>--请选择--</option>");
                            return;
                        }
                        //发送ajax获取二级地区
                        var htmlsub = '<option value="-1">--请选择--</option>';
                        $.get("/regions/app/" + parentId, function (subdata) {
                            console.log(subdata);
                            $.each(subdata, function (index, item) {
                                htmlsub += "<option value='" + item.id + "'>" + item.name + "</option>";
                            })

                            //dom原生方法让隐藏的显示出来(jquery怎么做)
                            $('#start5').html(htmlsub);
                            var subtraget = document.getElementById("div5");
                            subtraget.style.display = "inline";

                            //三级联动
                            $('.div5').change(function () {
                                var parentIds = $(this).val();
                                if (parentIds == -1) {
                                    $('#start5').html("<option value='-1'>--请选择--</option>");
                                    return;
                                }
                                var htmlsub2 = '<option value="-1">--请选择--</option>';
                                $.get("/regions/app/" + parentIds, function (subdatas) {
                                    $.each(subdatas, function (index, item) {
                                        htmlsub2 += "<option value='" + item.id + "'>" + item.name + "</option>";
                                    })

                                    //dom原生方法让隐藏的显示出来(jquery怎么做)
                                    var sub2traget = document.getElementById("div6");
                                    sub2traget.style.display = "inline";
                                    $('#start6').html(htmlsub2);
                                })

                            })


                        })
                    })

                })


            }

            //提交操作
            $('.next').click(function () {

                var srcval = $('#save  select[name="srcplace.id"]').val();
                if(srcplace){
                    //如果使用默认值
                    srcval=srcplace;
                    $('#save  select[name="srcplace.id"]').val(srcplace);
                }
                var destval = $('#save  select[name="destplace.id"]').val();
                if(destplace){
                    destval=destplace;
                    $('#save  select[name="destplace.id"]').val(destplace);
                }

                if(srcval <= 0){
                    $.messager.alert("温馨提示","请选择具体出发地点");
                    return;
                }
                if(destval <= 0){
                    $.messager.alert("温馨提示","请选择具体目的地");
                    return;
                }

                $('#save input[name="user.id"]').val(user.id);
                $('#save').ajaxSubmit(function (data) {
                    if(data.success){
                        window.location.href="/index.html";
                    }else {
                        alert(data.msg)
                    }
                })
            })





            //-------------------------------------校验------------------
            $('#save').validate({
                rules: {
                    tel:{
                        required: true,
                        length: 11
                    }
                }
            });
        })
    </script>



</head>
<body>


<body class="index1200">

<link href="http://www.tuniu.com/web-mall/static/css/custom-tour.css" rel="stylesheet">

<div>
    <form id="save" method="post" enctype="multipart/form-data" action="/customize/save">
    <div class="g-headNew"><img
            src="https://m.tuniucdn.com/fb2/t1/G5/M00/90/62/Cii-tFvqQhuIJSemAApQeh3AxoYAAQbFAFeWYwAClCS275.png" alt="">
    </div>
        <input type="hidden" name="id">
    <input type="hidden" name="user.id" id="userId">

    <div class="content">

        <div class="flowchart"><img
                src="https://m3.tuniucdn.com/fb2/t1/G5/M00/86/C7/Cii-tFvicimIWcEHAABLEfqdqxgAAQLEwP6SQYAAEsp095.png"
                alt=""></div>
        <div class="modular m-form-basic-demand"><h2><!----> <span class="m-title">基础需求</span> <span
                class="m-title-desc"></span></h2>
            <div class="modular-body panel-body">
                <div class="main">
                    <div data-v-de70c868="" class="form-item "><span data-v-de70c868=""
                                                                     class="left-title"><b>出发城市</b><em
                            data-v-de70c868="" class="stars">*</em></span><br data-v-de70c868="">
                        <div data-v-de70c868="" class="form-slot "><input data-v-de70c868="" name="start" class="startplace" name="" readonly
                                                                          onclick="fun();" placeholder="选择您的出发地点"
                                                                          type="text" ><!---->
                        </div>
                        <div id="div1" style="display:none"><select id="start" class="badge-pill div1" name="">

                        </select>
                        </div>
                        <div id="div2" style="display:none">
                            <select class="badge-pill div2" name="" id="start2">
                            </select>
                        </div>
                        <div id="div3" style="display:none">
                            <select class="badge-pill" name="srcplace.id" id="start3">

                            </select>
                        </div>
                    </div>
                    <div data-v-de70c868="" class="form-item"><span data-v-de70c868="" class="left-title">目的地<em
                            data-v-de70c868="" class="stars">*</em></span><br data-v-de70c868="">
                        <div data-v-de70c868="" class="form-slot"><input data-v-de70c868="" type="text" name="dest"
                                                                         readonly="readonly" onclick="funs()"
                                                                         placeholder="选择您想去的地点" name="">
                            <!----> <!---->
                            <ul data-v-de70c868="" class="des-list"></ul>
                        </div>

                        <div id="div4" style="display:none"><select id="start4" class="badge-pill div4" name="">
                        </select>
                        </div>
                        <div id="div5" style="display:none">
                            <select class="badge-pill div5" name="" id="start5">
                            </select>
                        </div>
                        <div id="div6" style="display:none">
                            <select class="badge-pill" name="destplace.id" id="start6">

                            </select>
                        </div>

                    </div>
                </div>
                <div data-v-de70c868="" class="form-item"><span data-v-de70c868="" class="left-title">预计出游日期：<em
                        data-v-de70c868="" class="stars">*</em></span><br data-v-de70c868="">
                    <div data-v-de70c868="" class="form-slot"><input data-v-de70c868="" type="text"
                                                                     readonly="readonly" onfocus="WdatePicker()"
                                                                     name="begintime" > <!----></div> <!---->
                    <!----></div>
                <div data-v-de70c868="" class="form-item"><span data-v-de70c868="" class="left-title">预计归来日期：<em
                        data-v-de70c868="" class="stars">*</em></span><br data-v-de70c868="">
                    <div data-v-de70c868="" class="form-slot"><input data-v-de70c868="" type="text"
                                                                     readonly="readonly" onfocus="WdatePicker()"
                                                                     name="endtime"> <!----></div> <!---->
                    <!----></div>
                <div data-v-de70c868="" class="form-item clear-float"><span data-v-de70c868=""
                                                                            class="left-title">预估出行人数<em
                        data-v-de70c868="" class="stars">*</em></span><br data-v-de70c868="">
                    <div data-v-de70c868="" class="form-slot">
                        <div data-v-de70c868="" class="pull-left">
                            <div class="input-number" data-v-de70c868="" style="margin-right: 40px;"><a
                                    class="tn_fontface minus">-></a><input type="number" class="value"
                                                                           name="passengerAdult"
                                                                           style="width: 60px;"><a
                                    class="tn_fontface plus"><-</a> <label>成人</label></div>
                            <div class="input-number" data-v-de70c868=""><a
                                    class="tn_fontface minus">-></a><input type="number" class="value"
                                                                           name="passengerChild"
                                                                           style="width: 60px;"><a
                                    class="tn_fontface plus"><-</a> <label>儿童</label></div>
                        </div>
                    </div> <!----> <!----></div>
                <div data-v-de70c868="" class="form-item"><span data-v-de70c868="" class="left-title">预估预算
                    <!----></span><br data-v-de70c868="">
                    <div data-v-de70c868="" class="form-slot"><input data-v-de70c868="" type="number"
                                                                     name="estimatedcost"
                                                                     placeholder="选填，若不确定可以暂不填写"></div> <!---->
                    <!----></div>
            </div>
        </div>
    </div>

    <div data-v-1c46aeb7="" class="modular m-form-basic-demand contact"><h2><!----> <span
            class="m-title">联系人信息</span> <span class="m-title-desc"></span></h2>
        <div class="modular-body panel-body">
            <div data-v-1c46aeb7="" class="main">
                <div data-v-de70c868="" data-v-1c46aeb7="" class="form-item"><span data-v-de70c868=""
                                                                                   class="left-title">客户类型<em
                        data-v-de70c868="" class="stars">*</em></span><br data-v-de70c868="">
                    <div data-v-de70c868="" class="form-slot">
                        <select class="badge-pill" name="customType" id="customType">
                            <option value="1">----自己----</option>
                            <option value="2">----家庭----</option>
                            <option value="3">---公司团建---</option>
                            <option value="4">----情侣----</option>
                            <option value="5">----密友----</option>
                            <option value="6">----其他----</option>
                        </select>
                    </div>
                    <!----> <!----></div>
                <div data-v-de70c868="" data-v-1c46aeb7="" class="form-item"
                     style="border-radius: 0px; width: 452px;"><span data-v-de70c868=""
                                                                     class="left-title">手机号码<em
                        data-v-de70c868="" class="stars">*</em></span><br data-v-de70c868="">
                    <div data-v-de70c868="" class="form-slot">
                        <div data-v-1c46aeb7="" data-v-de70c868="" class="input_div_left"><input
                                data-v-1c46aeb7="" data-v-de70c868="" type="hidden" name="zone" value="0086">
                            <div data-v-1c46aeb7="" data-v-de70c868="" class="zone_val"
                                 style="border-radius: 4px 0px 0px 4px;">中国 0086
                            </div>
                            <div data-v-1c46aeb7="" data-v-de70c868="" class="zone_tri"></div> <!----></div>
                        <input data-v-1c46aeb7="" data-v-de70c868="" type="number" name="tel" class="tel"></div> <!---->
                    <!----></div>
                <div data-v-de70c868="" data-v-1c46aeb7="" class="form-item"><span data-v-de70c868=""
                                                                                   class="left-title">其他需求</span>
                    <br data-v-de70c868="">
                    <div data-v-de70c868="" class="form-slot"><input data-v-1c46aeb7="" data-v-de70c868="" name="other"
                                                                     type="text" placeholder="选填，方便定制师与您联络"
                                                                     style="width: 925px;">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="footer" id="foot">
        <div class="footer-main">
            <div data-v-3f1c170d="" class="next"><a data-v-3f1c170d="" class="after" type="button">确认提交</a>
            </div>
        </div>
    </div>
        <!--回退操作-->
        <div class="search-head">
            <div class="row nav-search">
                <div class="col-2">
                    <a href="javascript:window.history.go(-1);">
                        <span><i class="fa fa-times"></i><h1>退出</h1></span>
                    </a>
                </div>
            </div>
        </div>
    <div id="custom-wrapper" class="g-wrapper">
    </div>
</form>
</div>

</div>

</body>
</body>
</html>